<div class="card dark-theme bg-base-200">

    <div class="card-header">

        <div class="card-title text-white">

            <svg viewBox="0 0 24 24">

                <path
                    d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" />

            </svg>

            AI-摘要

        </div>

        <button class="refresh-button text-white">↻</button>

    </div>

    <div class="card-body">

        <div class="summary">

            <span class="typing-effect text-white"><span class="loading"></span>正在生成AI摘要中...</span>

        </div>

        <div class="button-group">

            <button class="button">介绍自己</button>

            <button class="button">生成本文简介</button>

            <button class="button">推荐相关文章</button>

            <button class="button">前往主页</button>

        </div>

    </div>

</div>

<style>
    .card {

        background-color: #2B2D42; /* 修改为暗色背景 */

        border-radius: 8px;

        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

        overflow: hidden;

    }

    .card-header {

        background-color: #343A40; /* 修改为暗色背景 */

        padding: 16px;

        display: flex;

        justify-content: space-between;

        align-items: center;

        border-bottom: 1px solid #2B2D42; /* 修改为暗色边框 */

    }

    .card-title {

        font-weight: bold;

        display: flex;

        align-items: center;

    }

    .card-title svg {

        width: 24px;

        height: 24px;

        margin-right: 8px;

        fill: #4e6ef2;

    }

    .refresh-button {

        background: none;

        border: none;

        cursor: pointer;

        font-size: 18px;

    }

    .card-body {

        padding: 16px;

    }

    .summary {

        min-height: 60px;

        margin-bottom: 16px;

        position: relative;

    }

    .summary::after {

        content: '|';

        position: absolute;

        right: 0;

        bottom: 0;

        color: #4e6ef2;

        animation: blink 0.7s infinite, hide 0.1s 7s forwards;

    }

    @keyframes blink {

        0%,
        100% {
            opacity: 1;
        }

        50% {
            opacity: 0;
        }

    }

    @keyframes hide {

        to {
            opacity: 0;
        }

    }

    .typing-effect {

        display: inline-block;

        overflow: hidden;

        white-space: normal;

        margin: 0;

        letter-spacing: .1em;

        animation: typing 7s steps(70, end);

    }

    @keyframes typing {

        from {
            max-height: 0
        }

        to {
            max-height: 300px
        }

    }

    .button-group {

        display: grid;

        grid-template-columns: 1fr 1fr;

        gap: 8px;

    }

    .button {

        background-color: #4e6ef2;

        color: white;

        border: none;

        padding: 8px 12px;

        border-radius: 4px;

        cursor: pointer;

        transition: background-color 0.3s;

    }

    .button:hover {

        background-color: #3d5bd9;

    }

    .loading {

        display: inline-block;

        width: 20px;

        height: 20px;

        border: 3px solid rgba(78, 110, 242, 0.3);

        border-radius: 50%;

        border-top-color: #4e6ef2;

        animation: spin 1s ease-in-out infinite;

        margin-right: 10px;

    }

    @keyframes spin {

        to {
            transform: rotate(360deg);
        }

    }
</style>